<!DOCTYPE html>
<html>
	<head>
		<title>Status Page</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="js/d3.v3.min.js" charset="utf-8"></script>
		<script src="js/s3.js"></script>
		<script src="js/checkup.js"></script>
		<script src="js/config.js"></script>
		<script src="js/statuspage.js"></script>
		<link rel="icon" href="images/favicon.png" id="favicon">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<header id="overall-status" class="gray">
			<div id="overall-status-text">
				Loading
			</div>
			<div class="infobar">
				<div class="item">
					<b><span id="info-checkcount">&mdash;</span> checks</b> in the last <b><span id="info-timeframe">&mdash;</span></b>
				</div>
				<div class="item">
					<b>Last check:</b> <span id="info-lastcheck">&mdash;</span>
				</div>
			</div>
		</header>

		<main>
			<div id="chart-grid">
				<!-- Populated by JavaScript -->
				<span id="chart-placeholder">&nbsp;</span>
			</div>
			<div id="timeline">
				<div id="big-gap">
					There is a big gap of time where no checkups were performed, so some graphs may look distorted.
				</div>
				<div id="bg-line"></div>
			</div>
		</main>

		<footer>
			Powered by <img src="images/checkup.png" id="checkup-logo">
		</footer>
	</body>
</html>
